<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高校自习室管理系统</title>
    <style>
        body {
            font-family: 'Open Sans', sans-serif;
            margin: 0;
            background-color: #f9f9f9;
            color: #333;
        }

        h1 {
            text-align: center;
            margin-top: 30px;
            font-size: 36px;
            color: #2c3e50;
        }

        .tab-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .tab {
            padding: 15px 25px;
            background-color: #ecf0f1;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 18px;
            margin: 0 5px;
        }

        .tab:hover {
            background-color: #bdc3c7;
        }

        .tab.active {
            background-color: #3498db;
            color: white;
        }

        .content {
            padding: 20px;
            margin: 20px auto;
            width: 80%;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #f0f0f0;
        }

        button {
            padding: 8px 16px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .add-btn {
            background-color: #27ae60;
            color: white;
        }

        .add-btn:hover {
            background-color: #2ecc71;
        }

        .edit-btn {
            background-color: #f39c12;
            color: white;
        }

        .edit-btn:hover {
            background-color: #e67e22;
        }

        .delete-btn {
            background-color: #e74c3c;
            color: white;
        }

        .delete-btn:hover {
            background-color: #c0392b;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 30%;
            border-radius: 8px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* 搜索框样式 */
        .search-input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <h1>高校自习室管理系统</h1>
    <div class="tab-container">
        <button class="tab" onclick="openTab(event, 'Home')">首页</button>
        <button class="tab" onclick="openTab(event, 'RoomManagement')">自习室管理</button>
        <button class="tab" onclick="openTab(event, 'StudentManagement')">学生管理</button>
        <button class="tab" onclick="openTab(event, 'ReservationManagement')">预约管理</button>
        <button class="tab" onclick="openTab(event, 'UsageStatistics')">使用统计</button>
        <button class="tab" onclick="openTab(event, 'FeedbackManagement')">反馈管理</button>
    </div>
    <div class="content">
        <div id="Home" class="tab-content">
            <h2>首页</h2>
            <p>欢迎使用高校自习室管理系统，您可以通过上方导航栏选择不同的功能模块进行操作。</p>
        </div>
        <div id="RoomManagement" class="tab-content">
            <h2>自习室管理</h2>
            <input type="text" class="search-input" id="roomSearch" placeholder="搜索自习室编号" oninput="searchRooms()">
            <button class="add-btn" onclick="openAddRoomModal()">添加自习室</button>
            <table id="roomTable">
                <thead>
                    <tr>
                        <th>自习室编号</th>
                        <th>座位数量</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="StudentManagement" class="tab-content">
            <h2>学生管理</h2>
            <input type="text" class="search-input" id="studentSearch" placeholder="搜索学号" oninput="searchStudents()">
            <button class="add-btn" onclick="openAddStudentModal()">添加学生</button>
            <table id="studentTable">
                <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>专业</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="ReservationManagement" class="tab-content">
            <h2>预约管理</h2>
            <input type="text" class="search-input" id="reservationSearch" placeholder="搜索预约编号" oninput="searchReservations()">
            <button class="add-btn" onclick="openAddReservationModal()">添加预约</button>
            <table id="reservationTable">
                <thead>
                    <tr>
                        <th>预约编号</th>
                        <th>学生学号</th>
                        <th>自习室编号</th>
                        <th>预约时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="UsageStatistics" class="tab-content">
            <h2>使用统计</h2>
            <input type="text" class="search-input" id="usageSearch" placeholder="搜索自习室编号" oninput="searchUsageStatistics()">
            <table id="usageTable">
                <thead>
                    <tr>
                        <th>自习室编号</th>
                        <th>使用次数</th>
                        <th>使用时长（小时）</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="FeedbackManagement" class="tab-content">
            <h2>反馈管理</h2>
            <input type="text" class="search-input" id="feedbackSearch" placeholder="搜索反馈编号" oninput="searchFeedbacks()">
            <button class="add-btn" onclick="openAddFeedbackModal()">添加反馈</button>
            <table id="feedbackTable">
                <thead>
                    <tr>
                        <th>反馈编号</th>
                        <th>学生学号</th>
                        <th>反馈内容</th>
                        <th>反馈时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <!-- 自习室添加/编辑模态框 -->
    <div id="roomModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeRoomModal()">&times;</span>
            <h2 id="roomModalTitle">添加自习室</h2>
            <label for="roomNumber">自习室编号:</label>
            <input type="text" id="roomNumber" placeholder="自习室编号">
            <label for="roomSeats">座位数量:</label>
            <input type="number" id="roomSeats" placeholder="座位数量">
            <label for="roomStatus">状态:</label>
            <select id="roomStatus">
                <option value="空闲">空闲</option>
                <option value="已预约">已预约</option>
                <option value="使用中">使用中</option>
            </select>
            <button onclick="saveRoom()">保存</button>
        </div>
    </div>

    <!-- 学生添加/编辑模态框 -->
    <div id="studentModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeStudentModal()">&times;</span>
            <h2 id="studentModalTitle">添加学生</h2>
            <label for="studentId">学号:</label>
            <input type="text" id="studentId" placeholder="学号">
            <label for="studentName">姓名:</label>
            <input type="text" id="studentName" placeholder="姓名">
            <label for="studentMajor">专业:</label>
            <input type="text" id="studentMajor" placeholder="专业">
            <button onclick="saveStudent()">保存</button>
        </div>
    </div>

    <!-- 预约添加/编辑模态框 -->
    <div id="reservationModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeReservationModal()">&times;</span>
            <h2 id="reservationModalTitle">添加预约</h2>
            <label for="reservationId">预约编号:</label>
            <input type="text" id="reservationId" placeholder="预约编号">
            <label for="reservationStudentId">学生学号:</label>
            <input type="text" id="reservationStudentId" placeholder="学生学号">
            <label for="reservationRoomNumber">自习室编号:</label>
            <input type="text" id="reservationRoomNumber" placeholder="自习室编号">
            <label for="reservationTime">预约时间:</label>
            <input type="text" id="reservationTime" placeholder="预约时间">
            <button onclick="saveReservation()">保存</button>
        </div>
    </div>

    <!-- 反馈添加/编辑模态框 -->
    <div id="feedbackModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeFeedbackModal()">&times;</span>
            <h2 id="feedbackModalTitle">添加反馈</h2>
            <label for="feedbackId">反馈编号:</label>
            <input type="text" id="feedbackId" placeholder="反馈编号">
            <label for="feedbackStudentId">学生学号:</label>
            <input type="text" id="feedbackStudentId" placeholder="学生学号">
            <label for="feedbackContent">反馈内容:</label>
            <textarea id="feedbackContent" placeholder="反馈内容"></textarea>
            <label for="feedbackTime">反馈时间:</label>
            <input type="text" id="feedbackTime" placeholder="反馈时间">
            <button onclick="saveFeedback()">保存</button>
        </div>
    </div>

    <script>
        // 初始化表格
        function initTables() {
            // 自习室管理
            let rooms = [
                { number: 'A101', seats: 50, status: '空闲' },
                { number: 'A102', seats: 40, status: '已预约' },
                { number: 'A103', seats: 60, status: '使用中' },
                { number: 'A201', seats: 50, status: '空闲' },
                { number: 'A202', seats: 40, status: '已预约' },
                { number: 'A203', seats: 60, status: '使用中' },
                { number: 'B101', seats: 50, status: '空闲' },
                { number: 'B102', seats: 40, status: '已预约' },
                { number: 'B103', seats: 60, status: '使用中' },
                { number: 'B201', seats: 50, status: '空闲' }
            ];
            let roomTable = document.getElementById('roomTable').getElementsByTagName('tbody')[0];
            roomTable.innerHTML = '';
            rooms.forEach((room, index) => {
                let row = roomTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = room.number;
                cell2.innerHTML = room.seats;
                cell3.innerHTML = room.status;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditRoomModal(${index})">编辑</button><button class="delete-btn" onclick="deleteRoom(${index})">删除</button>`;
            });

            // 学生管理
            let students = [
                { id: '2025001', name: '张三', major: '计算机科学与技术' },
                { id: '2025002', name: '李四', major: '电子信息工程' },
                { id: '2025003', name: '王五', major: '数学与应用数学' },
                { id: '2025004', name: '赵六', major: '物理学' },
                { id: '2025005', name: '孙七', major: '化学' },
                { id: '2025006', name: '周八', major: '生物学' },
                { id: '2025007', name: '吴九', major: '英语' },
                { id: '2025008', name: '郑十', major: '法学' },
                { id: '2025009', name: '王十一', major: '会计学' },
                { id: '2025010', name: '李十二', major: '市场营销' }
            ];
            let studentTable = document.getElementById('studentTable').getElementsByTagName('tbody')[0];
            studentTable.innerHTML = '';
            students.forEach((student, index) => {
                let row = studentTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = student.id;
                cell2.innerHTML = student.name;
                cell3.innerHTML = student.major;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditStudentModal(${index})">编辑</button><button class="delete-btn" onclick="deleteStudent(${index})">删除</button>`;
            });

            // 预约管理
            let reservations = [
                { id: 'R001', studentId: '2025001', roomNumber: 'A101', time: '2025-03-22 09:00 - 12:00' },
                { id: 'R002', studentId: '2025002', roomNumber: 'A102', time: '2025-03-22 13:00 - 16:00' },
                { id: 'R003', studentId: '2025003', roomNumber: 'A103', time: '2025-03-22 14:00 - 17:00' },
                { id: 'R004', studentId: '2025004', roomNumber: 'A201', time: '2025-03-23 09:00 - 12:00' },
                { id: 'R005', studentId: '2025005', roomNumber: 'A202', time: '2025-03-23 13:00 - 16:00' },
                { id: 'R006', studentId: '2025006', roomNumber: 'A203', time: '2025-03-23 14:00 - 17:00' },
                { id: 'R007', studentId: '2025007', roomNumber: 'B101', time: '2025-03-24 09:00 - 12:00' },
                { id: 'R008', studentId: '2025008', roomNumber: 'B102', time: '2025-03-24 13:00 - 16:00' },
                { id: 'R009', studentId: '2025009', roomNumber: 'B103', time: '2025-03-24 14:00 - 17:00' },
                { id: 'R010', studentId: '2025010', roomNumber: 'B201', time: '2025-03-25 09:00 - 12:00' }
            ];
            let reservationTable = document.getElementById('reservationTable').getElementsByTagName('tbody')[0];
            reservationTable.innerHTML = '';
            reservations.forEach((reservation, index) => {
                let row = reservationTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                let cell5 = row.insertCell(4);
                cell1.innerHTML = reservation.id;
                cell2.innerHTML = reservation.studentId;
                cell3.innerHTML = reservation.roomNumber;
                cell4.innerHTML = reservation.time;
                cell5.innerHTML = `<button class="edit-btn" onclick="openEditReservationModal(${index})">编辑</button><button class="delete-btn" onclick="deleteReservation(${index})">删除</button>`;
            });

            // 使用统计
            let usageStatistics = [
                { roomNumber: 'A101', usageCount: 10, usageHours: 30 },
                { roomNumber: 'A102', usageCount: 8, usageHours: 24 },
                { roomNumber: 'A103', usageCount: 12, usageHours: 36 },
                { roomNumber: 'A201', usageCount: 9, usageHours: 27 },
                { roomNumber: 'A202', usageCount: 7, usageHours: 21 },
                { roomNumber: 'A203', usageCount: 11, usageHours: 33 },
                { roomNumber: 'B101', usageCount: 10, usageHours: 30 },
                { roomNumber: 'B102', usageCount: 8, usageHours: 24 },
                { roomNumber: 'B103', usageCount: 12, usageHours: 36 },
                { roomNumber: 'B201', usageCount: 9, usageHours: 27 }
            ];
            let usageTable = document.getElementById('usageTable').getElementsByTagName('tbody')[0];
            usageTable.innerHTML = '';
            usageStatistics.forEach((usage, index) => {
                let row = usageTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                cell1.innerHTML = usage.roomNumber;
                cell2.innerHTML = usage.usageCount;
                cell3.innerHTML = usage.usageHours;
            });

            // 反馈管理
            let feedbacks = [
                { id: 'F001', studentId: '2025001', content: '自习室环境很好，希望能增加一些绿植。', time: '2025-03-20' },
                { id: 'F002', studentId: '2025002', content: '座位有点硬，建议更换软一点的座椅。', time: '2025-03-21' },
                { id: 'F003', studentId: '2025003', content: '自习室灯光太亮，有点刺眼。', time: '2025-03-22' },
                { id: 'F004', studentId: '2025004', content: '希望能提供更多的充电插座。', time: '2025-03-23' },
                { id: 'F005', studentId: '2025005', content: '自习室的空调温度有点低。', time: '2025-03-24' },
                { id: 'F006', studentId: '2025006', content: '建议增加一些学习资料。', time: '2025-03-25' },
                { id: 'F007', studentId: '2025007', content: '希望能开放更多的自习室。', time: '2025-03-26' },
                { id: 'F008', studentId: '2025008', content: '自习室的网络不太稳定。', time: '2025-03-27' },
                { id: 'F009', studentId: '2025009', content: '希望能提供一些饮用水。', time: '2025-03-28' },
                { id: 'F010', studentId: '2025010', content: '建议定期打扫自习室。', time: '2025-03-29' }
            ];
            let feedbackTable = document.getElementById('feedbackTable').getElementsByTagName('tbody')[0];
            feedbackTable.innerHTML = '';
            feedbacks.forEach((feedback, index) => {
                let row = feedbackTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                let cell5 = row.insertCell(4);
                cell1.innerHTML = feedback.id;
                cell2.innerHTML = feedback.studentId;
                cell3.innerHTML = feedback.content;
                cell4.innerHTML = feedback.time;
                cell5.innerHTML = `<button class="edit-btn" onclick="openEditFeedbackModal(${index})">编辑</button><button class="delete-btn" onclick="deleteFeedback(${index})">删除</button>`;
            });
        }

        // 打开 tab 页面
        function openTab(evt, tabName) {
            let i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName('tab-content');
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = 'none';
            }
            tablinks = document.getElementsByClassName('tab');
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(' active', '');
            }
            document.getElementById(tabName).style.display = 'block';
            evt.currentTarget.className += ' active';
        }

        // 自习室管理相关函数
        let currentRoomIndex = null;

        function openAddRoomModal() {
            currentRoomIndex = null;
            document.getElementById('roomModalTitle').innerHTML = '添加自习室';
            document.getElementById('roomNumber').value = '';
            document.getElementById('roomSeats').value = '';
            document.getElementById('roomStatus').value = '空闲';
            document.getElementById('roomModal').style.display = 'block';
        }

        function openEditRoomModal(index) {
            currentRoomIndex = index;
            let rooms = [
                { number: 'A101', seats: 50, status: '空闲' },
                { number: 'A102', seats: 40, status: '已预约' },
                { number: 'A103', seats: 60, status: '使用中' },
                { number: 'A201', seats: 50, status: '空闲' },
                { number: 'A202', seats: 40, status: '已预约' },
                { number: 'A203', seats: 60, status: '使用中' },
                { number: 'B101', seats: 50, status: '空闲' },
                { number: 'B102', seats: 40, status: '已预约' },
                { number: 'B103', seats: 60, status: '使用中' },
                { number: 'B201', seats: 50, status: '空闲' }
            ];
            let room = rooms[index];
            document.getElementById('roomModalTitle').innerHTML = '编辑自习室';
            document.getElementById('roomNumber').value = room.number;
            document.getElementById('roomSeats').value = room.seats;
            document.getElementById('roomStatus').value = room.status;
            document.getElementById('roomModal').style.display = 'block';
        }

        function closeRoomModal() {
            document.getElementById('roomModal').style.display = 'none';
        }

        function saveRoom() {
            let rooms = [
                { number: 'A101', seats: 50, status: '空闲' },
                { number: 'A102', seats: 40, status: '已预约' },
                { number: 'A103', seats: 60, status: '使用中' },
                { number: 'A201', seats: 50, status: '空闲' },
                { number: 'A202', seats: 40, status: '已预约' },
                { number: 'A203', seats: 60, status: '使用中' },
                { number: 'B101', seats: 50, status: '空闲' },
                { number: 'B102', seats: 40, status: '已预约' },
                { number: 'B103', seats: 60, status: '使用中' },
                { number: 'B201', seats: 50, status: '空闲' }
            ];
            let number = document.getElementById('roomNumber').value;
            let seats = parseInt(document.getElementById('roomSeats').value);
            let status = document.getElementById('roomStatus').value;
            if (number &&!isNaN(seats)) {
                if (currentRoomIndex!== null) {
                    rooms[currentRoomIndex] = { number, seats, status };
                } else {
                    rooms.push({ number, seats, status });
                }
                let roomTable = document.getElementById('roomTable').getElementsByTagName('tbody')[0];
                roomTable.innerHTML = '';
                rooms.forEach((room, index) => {
                    let row = roomTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    let cell4 = row.insertCell(3);
                    cell1.innerHTML = room.number;
                    cell2.innerHTML = room.seats;
                    cell3.innerHTML = room.status;
                    cell4.innerHTML = `<button class="edit-btn" onclick="openEditRoomModal(${index})">编辑</button><button class="delete-btn" onclick="deleteRoom(${index})">删除</button>`;
                });
                closeRoomModal();
            }
        }

        function deleteRoom(index) {
            let rooms = [
                { number: 'A101', seats: 50, status: '空闲' },
                { number: 'A102', seats: 40, status: '已预约' },
                { number: 'A103', seats: 60, status: '使用中' },
                { number: 'A201', seats: 50, status: '空闲' },
                { number: 'A202', seats: 40, status: '已预约' },
                { number: 'A203', seats: 60, status: '使用中' },
                { number: 'B101', seats: 50, status: '空闲' },
                { number: 'B102', seats: 40, status: '已预约' },
                { number: 'B103', seats: 60, status: '使用中' },
                { number: 'B201', seats: 50, status: '空闲' }
            ];
            rooms.splice(index, 1);
            let roomTable = document.getElementById('roomTable').getElementsByTagName('tbody')[0];
            roomTable.innerHTML = '';
            rooms.forEach((room, index) => {
                let row = roomTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = room.number;
                cell2.innerHTML = room.seats;
                cell3.innerHTML = room.status;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditRoomModal(${index})">编辑</button><button class="delete-btn" onclick="deleteRoom(${index})">删除</button>`;
            });
        }

        function searchRooms() {
            let input = document.getElementById('roomSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('roomTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        // 学生管理相关函数
        let currentStudentIndex = null;

        function openAddStudentModal() {
            currentStudentIndex = null;
            document.getElementById('studentModalTitle').innerHTML = '添加学生';
            document.getElementById('studentId').value = '';
            document.getElementById('studentName').value = '';
            document.getElementById('studentMajor').value = '';
            document.getElementById('studentModal').style.display = 'block';
        }

        function openEditStudentModal(index) {
            currentStudentIndex = index;
            let students = [
                { id: '2025001', name: '张三', major: '计算机科学与技术' },
                { id: '2025002', name: '李四', major: '电子信息工程' },
                { id: '2025003', name: '王五', major: '数学与应用数学' },
                { id: '2025004', name: '赵六', major: '物理学' },
                { id: '2025005', name: '孙七', major: '化学' },
                { id: '2025006', name: '周八', major: '生物学' },
                { id: '2025007', name: '吴九', major: '英语' },
                { id: '2025008', name: '郑十', major: '法学' },
                { id: '2025009', name: '王十一', major: '会计学' },
                { id: '2025010', name: '李十二', major: '市场营销' }
            ];
            let student = students[index];
            document.getElementById('studentModalTitle').innerHTML = '编辑学生';
            document.getElementById('studentId').value = student.id;
            document.getElementById('studentName').value = student.name;
            document.getElementById('studentMajor').value = student.major;
            document.getElementById('studentModal').style.display = 'block';
        }

        function closeStudentModal() {
            document.getElementById('studentModal').style.display = 'none';
        }

        function saveStudent() {
            let students = [
                { id: '2025001', name: '张三', major: '计算机科学与技术' },
                { id: '2025002', name: '李四', major: '电子信息工程' },
                { id: '2025003', name: '王五', major: '数学与应用数学' },
                { id: '2025004', name: '赵六', major: '物理学' },
                { id: '2025005', name: '孙七', major: '化学' },
                { id: '2025006', name: '周八', major: '生物学' },
                { id: '2025007', name: '吴九', major: '英语' },
                { id: '2025008', name: '郑十', major: '法学' },
                { id: '2025009', name: '王十一', major: '会计学' },
                { id: '2025010', name: '李十二', major: '市场营销' }
            ];
            let id = document.getElementById('studentId').value;
            let name = document.getElementById('studentName').value;
            let major = document.getElementById('studentMajor').value;
            if (id && name && major) {
                if (currentStudentIndex!== null) {
                    students[currentStudentIndex] = { id, name, major };
                } else {
                    students.push({ id, name, major });
                }
                let studentTable = document.getElementById('studentTable').getElementsByTagName('tbody')[0];
                studentTable.innerHTML = '';
                students.forEach((student, index) => {
                    let row = studentTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    let cell4 = row.insertCell(3);
                    cell1.innerHTML = student.id;
                    cell2.innerHTML = student.name;
                    cell3.innerHTML = student.major;
                    cell4.innerHTML = `<button class="edit-btn" onclick="openEditStudentModal(${index})">编辑</button><button class="delete-btn" onclick="deleteStudent(${index})">删除</button>`;
                });
                closeStudentModal();
            }
        }

        function deleteStudent(index) {
            let students = [
                { id: '2025001', name: '张三', major: '计算机科学与技术' },
                { id: '2025002', name: '李四', major: '电子信息工程' },
                { id: '2025003', name: '王五', major: '数学与应用数学' },
                { id: '2025004', name: '赵六', major: '物理学' },
                { id: '2025005', name: '孙七', major: '化学' },
                { id: '2025006', name: '周八', major: '生物学' },
                { id: '2025007', name: '吴九', major: '英语' },
                { id: '2025008', name: '郑十', major: '法学' },
                { id: '2025009', name: '王十一', major: '会计学' },
                { id: '2025010', name: '李十二', major: '市场营销' }
            ];
            students.splice(index, 1);
            let studentTable = document.getElementById('studentTable').getElementsByTagName('tbody')[0];
            studentTable.innerHTML = '';
            students.forEach((student, index) => {
                let row = studentTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = student.id;
                cell2.innerHTML = student.name;
                cell3.innerHTML = student.major;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditStudentModal(${index})">编辑</button><button class="delete-btn" onclick="deleteStudent(${index})">删除</button>`;
            });
        }

        function searchStudents() {
            let input = document.getElementById('studentSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('studentTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        // 预约管理相关函数
        let currentReservationIndex = null;

        function openAddReservationModal() {
            currentReservationIndex = null;
            document.getElementById('reservationModalTitle').innerHTML = '添加预约';
            document.getElementById('reservationId').value = '';
            document.getElementById('reservationStudentId').value = '';
            document.getElementById('reservationRoomNumber').value = '';
            document.getElementById('reservationTime').value = '';
            document.getElementById('reservationModal').style.display = 'block';
        }

        function openEditReservationModal(index) {
            currentReservationIndex = index;
            let reservations = [
                { id: 'R001', studentId: '2025001', roomNumber: 'A101', time: '2025-03-22 09:00 - 12:00' },
                { id: 'R002', studentId: '2025002', roomNumber: 'A102', time: '2025-03-22 13:00 - 16:00' },
                { id: 'R003', studentId: '2025003', roomNumber: 'A103', time: '2025-03-22 14:00 - 17:00' },
                { id: 'R004', studentId: '2025004', roomNumber: 'A201', time: '2025-03-23 09:00 - 12:00' },
                { id: 'R005', studentId: '2025005', roomNumber: 'A202', time: '2025-03-23 13:00 - 16:00' },
                { id: 'R006', studentId: '2025006', roomNumber: 'A203', time: '2025-03-23 14:00 - 17:00' },
                { id: 'R007', studentId: '2025007', roomNumber: 'B101', time: '2025-03-24 09:00 - 12:00' },
                { id: 'R008', studentId: '2025008', roomNumber: 'B102', time: '2025-03-24 13:00 - 16:00' },
                { id: 'R009', studentId: '2025009', roomNumber: 'B103', time: '2025-03-24 14:00 - 17:00' },
                { id: 'R010', studentId: '2025010', roomNumber: 'B201', time: '2025-03-25 09:00 - 12:00' }
            ];
            let reservation = reservations[index];
            document.getElementById('reservationModalTitle').innerHTML = '编辑预约';
            document.getElementById('reservationId').value = reservation.id;
            document.getElementById('reservationStudentId').value = reservation.studentId;
            document.getElementById('reservationRoomNumber').value = reservation.roomNumber;
            document.getElementById('reservationTime').value = reservation.time;
            document.getElementById('reservationModal').style.display = 'block';
        }

        function closeReservationModal() {
            document.getElementById('reservationModal').style.display = 'none';
        }

        function saveReservation() {
            let reservations = [
                { id: 'R001', studentId: '2025001', roomNumber: 'A101', time: '2025-03-22 09:00 - 12:00' },
                { id: 'R002', studentId: '2025002', roomNumber: 'A102', time: '2025-03-22 13:00 - 16:00' },
                { id: 'R003', studentId: '2025003', roomNumber: 'A103', time: '2025-03-22 14:00 - 17:00' },
                { id: 'R004', studentId: '2025004', roomNumber: 'A201', time: '2025-03-23 09:00 - 12:00' },
                { id: 'R005', studentId: '2025005', roomNumber: 'A202', time: '2025-03-23 13:00 - 16:00' },
                { id: 'R006', studentId: '2025006', roomNumber: 'A203', time: '2025-03-23 14:00 - 17:00' },
                { id: 'R007', studentId: '2025007', roomNumber: 'B101', time: '2025-03-24 09:00 - 12:00' },
                { id: 'R008', studentId: '2025008', roomNumber: 'B102', time: '2025-03-24 13:00 - 16:00' },
                { id: 'R009', studentId: '2025009', roomNumber: 'B103', time: '2025-03-24 14:00 - 17:00' },
                { id: 'R010', studentId: '2025010', roomNumber: 'B201', time: '2025-03-25 09:00 - 12:00' }
            ];
            let id = document.getElementById('reservationId').value;
            let studentId = document.getElementById('reservationStudentId').value;
            let roomNumber = document.getElementById('reservationRoomNumber').value;
            let time = document.getElementById('reservationTime').value;
            if (id && studentId && roomNumber && time) {
                if (currentReservationIndex!== null) {
                    reservations[currentReservationIndex] = { id, studentId, roomNumber, time };
                } else {
                    reservations.push({ id, studentId, roomNumber, time });
                }
                let reservationTable = document.getElementById('reservationTable').getElementsByTagName('tbody')[0];
                reservationTable.innerHTML = '';
                reservations.forEach((reservation, index) => {
                    let row = reservationTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    let cell4 = row.insertCell(3);
                    let cell5 = row.insertCell(4);
                    cell1.innerHTML = reservation.id;
                    cell2.innerHTML = reservation.studentId;
                    cell3.innerHTML = reservation.roomNumber;
                    cell4.innerHTML = reservation.time;
                    cell5.innerHTML = `<button class="edit-btn" onclick="openEditReservationModal(${index})">编辑</button><button class="delete-btn" onclick="deleteReservation(${index})">删除</button>`;
                });
                closeReservationModal();
            }
        }

        function deleteReservation(index) {
            let reservations = [
                { id: 'R001', studentId: '2025001', roomNumber: 'A101', time: '2025-03-22 09:00 - 12:00' },
                { id: 'R002', studentId: '2025002', roomNumber: 'A102', time: '2025-03-22 13:00 - 16:00' },
                { id: 'R003', studentId: '2025003', roomNumber: 'A103', time: '2025-03-22 14:00 - 17:00' },
                { id: 'R004', studentId: '2025004', roomNumber: 'A201', time: '2025-03-23 09:00 - 12:00' },
                { id: 'R005', studentId: '2025005', roomNumber: 'A202', time: '2025-03-23 13:00 - 16:00' },
                { id: 'R006', studentId: '2025006', roomNumber: 'A203', time: '2025-03-23 14:00 - 17:00' },
                { id: 'R007', studentId: '2025007', roomNumber: 'B101', time: '2025-03-24 09:00 - 12:00' },
                { id: 'R008', studentId: '2025008', roomNumber: 'B102', time: '2025-03-24 13:00 - 16:00' },
                { id: 'R009', studentId: '2025009', roomNumber: 'B103', time: '2025-03-24 14:00 - 17:00' },
                { id: 'R010', studentId: '2025010', roomNumber: 'B201', time: '2025-03-25 09:00 - 12:00' }
            ];
            reservations.splice(index, 1);
            let reservationTable = document.getElementById('reservationTable').getElementsByTagName('tbody')[0];
            reservationTable.innerHTML = '';
            reservations.forEach((reservation, index) => {
                let row = reservationTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                let cell5 = row.insertCell(4);
                cell1.innerHTML = reservation.id;
                cell2.innerHTML = reservation.studentId;
                cell3.innerHTML = reservation.roomNumber;
                cell4.innerHTML = reservation.time;
                cell5.innerHTML = `<button class="edit-btn" onclick="openEditReservationModal(${index})">编辑</button><button class="delete-btn" onclick="deleteReservation(${index})">删除</button>`;
            });
        }

        function searchReservations() {
            let input = document.getElementById('reservationSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('reservationTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        // 使用统计搜索功能
        function searchUsageStatistics() {
            let input = document.getElementById('usageSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('usageTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        // 反馈管理相关函数
        let currentFeedbackIndex = null;

        function openAddFeedbackModal() {
            currentFeedbackIndex = null;
            document.getElementById('feedbackModalTitle').innerHTML = '添加反馈';
            document.getElementById('feedbackId').value = '';
            document.getElementById('feedbackStudentId').value = '';
            document.getElementById('feedbackContent').value = '';
            document.getElementById('feedbackTime').value = '';
            document.getElementById('feedbackModal').style.display = 'block';
        }

        function openEditFeedbackModal(index) {
            currentFeedbackIndex = index;
            let feedbacks = [
                { id: 'F001', studentId: '2025001', content: '自习室环境很好，希望能增加一些绿植。', time: '2025-03-20' },
                { id: 'F002', studentId: '2025002', content: '座位有点硬，建议更换软一点的座椅。', time: '2025-03-21' },
                { id: 'F003', studentId: '2025003', content: '自习室灯光太亮，有点刺眼。', time: '2025-03-22' },
                { id: 'F004', studentId: '2025004', content: '希望能提供更多的充电插座。', time: '2025-03-23' },
                { id: 'F005', studentId: '2025005', content: '自习室的空调温度有点低。', time: '2025-03-24' },
                { id: 'F006', studentId: '2025006', content: '建议增加一些学习资料。', time: '2025-03-25' },
                { id: 'F007', studentId: '2025007', content: '希望能开放更多的自习室。', time: '2025-03-26' },
                { id: 'F008', studentId: '2025008', content: '自习室的网络不太稳定。', time: '2025-03-27' },
                { id: 'F009', studentId: '2025009', content: '希望能提供一些饮用水。', time: '2025-03-28' },
                { id: 'F010', studentId: '2025010', content: '建议定期打扫自习室。', time: '2025-03-29' }
            ];
            let feedback = feedbacks[index];
            document.getElementById('feedbackModalTitle').innerHTML = '编辑反馈';
            document.getElementById('feedbackId').value = feedback.id;
            document.getElementById('feedbackStudentId').value = feedback.studentId;
            document.getElementById('feedbackContent').value = feedback.content;
            document.getElementById('feedbackTime').value = feedback.time;
            document.getElementById('feedbackModal').style.display = 'block';
        }

        function closeFeedbackModal() {
            document.getElementById('feedbackModal').style.display = 'none';
        }

        function saveFeedback() {
            let feedbacks = [
                { id: 'F001', studentId: '2025001', content: '自习室环境很好，希望能增加一些绿植。', time: '2025-03-20' },
                { id: 'F002', studentId: '2025002', content: '座位有点硬，建议更换软一点的座椅。', time: '2025-03-21' },
                { id: 'F003', studentId: '2025003', content: '自习室灯光太亮，有点刺眼。', time: '2025-03-22' },
                { id: 'F004', studentId: '2025004', content: '希望能提供更多的充电插座。', time: '2025-03-23' },
                { id: 'F005', studentId: '2025005', content: '自习室的空调温度有点低。', time: '2025-03-24' },
                { id: 'F006', studentId: '2025006', content: '建议增加一些学习资料。', time: '2025-03-25' },
                { id: 'F007', studentId: '2025007', content: '希望能开放更多的自习室。', time: '2025-03-26' },
                { id: 'F008', studentId: '2025008', content: '自习室的网络不太稳定。', time: '2025-03-27' },
                { id: 'F009', studentId: '2025009', content: '希望能提供一些饮用水。', time: '2025-03-28' },
                { id: 'F010', studentId: '2025010', content: '建议定期打扫自习室。', time: '2025-03-29' }
            ];
            let id = document.getElementById('feedbackId').value;
            let studentId = document.getElementById('feedbackStudentId').value;
            let content = document.getElementById('feedbackContent').value;
            let time = document.getElementById('feedbackTime').value;
            if (id && studentId && content && time) {
                if (currentFeedbackIndex!== null) {
                    feedbacks[currentFeedbackIndex] = { id, studentId, content, time };
                } else {
                    feedbacks.push({ id, studentId, content, time });
                }
                let feedbackTable = document.getElementById('feedbackTable').getElementsByTagName('tbody')[0];
                feedbackTable.innerHTML = '';
                feedbacks.forEach((feedback, index) => {
                    let row = feedbackTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    let cell4 = row.insertCell(3);
                    let cell5 = row.insertCell(4);
                    cell1.innerHTML = feedback.id;
                    cell2.innerHTML = feedback.studentId;
                    cell3.innerHTML = feedback.content;
                    cell4.innerHTML = feedback.time;
                    cell5.innerHTML = `<button class="edit-btn" onclick="openEditFeedbackModal(${index})">编辑</button><button class="delete-btn" onclick="deleteFeedback(${index})">删除</button>`;
                });
                closeFeedbackModal();
            }
        }

        function deleteFeedback(index) {
            let feedbacks = [
                { id: 'F001', studentId: '2025001', content: '自习室环境很好，希望能增加一些绿植。', time: '2025-03-20' },
                { id: 'F002', studentId: '2025002', content: '座位有点硬，建议更换软一点的座椅。', time: '2025-03-21' },
                { id: 'F003', studentId: '2025003', content: '自习室灯光太亮，有点刺眼。', time: '2025-03-22' },
                { id: 'F004', studentId: '2025004', content: '希望能提供更多的充电插座。', time: '2025-03-23' },
                { id: 'F005', studentId: '2025005', content: '自习室的空调温度有点低。', time: '2025-03-24' },
                { id: 'F006', studentId: '2025006', content: '建议增加一些学习资料。', time: '2025-03-25' },
                { id: 'F007', studentId: '2025007', content: '希望能开放更多的自习室。', time: '2025-03-26' },
                { id: 'F008', studentId: '2025008', content: '自习室的网络不太稳定。', time: '2025-03-27' },
                { id: 'F009', studentId: '2025009', content: '希望能提供一些饮用水。', time: '2025-03-28' },
                { id: 'F010', studentId: '2025010', content: '建议定期打扫自习室。', time: '2025-03-29' }
            ];
            feedbacks.splice(index, 1);
            let feedbackTable = document.getElementById('feedbackTable').getElementsByTagName('tbody')[0];
            feedbackTable.innerHTML = '';
            feedbacks.forEach((feedback, index) => {
                let row = feedbackTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                let cell5 = row.insertCell(4);
                cell1.innerHTML = feedback.id;
                cell2.innerHTML = feedback.studentId;
                cell3.innerHTML = feedback.content;
                cell4.innerHTML = feedback.time;
                cell5.innerHTML = `<button class="edit-btn" onclick="openEditFeedbackModal(${index})">编辑</button><button class="delete-btn" onclick="deleteFeedback(${index})">删除</button>`;
            });
        }

        function searchFeedbacks() {
            let input = document.getElementById('feedbackSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('feedbackTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        // 页面加载完成后初始化表格
        window.onload = function () {
            initTables();
            openTab(event, 'Home');
        };
    </script>
</body>

</html>